﻿@page "/chart/indexed-category-axis"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Buttons

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the rendering of the indexed category axis in the chart, with details about GDP growth across different countries.</p>
</SampleDescription>
<ActionDescription>
    <p>The category axis is also rendered on the basis of the index values in the data source. To render indexed category axis, set <code>ValueType</code> in axis to <code>Category</code> and <code>IsIndexed</code> property to <code>true</code>.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the indexed category axis can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/category-axis/#indexed-category-axis'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-8 control-section sb-property-border">
    <SfChart Title="Real GDP Growth" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" EdgeLabelPlacement="EdgeLabelPlacement.Shift" LabelRotation="@LabelRotate" Interval="1" IsIndexed="@Indexed">
            <ChartAxisCrosshairTooltip Enable="true"></ChartAxisCrosshairTooltip>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="GDP Growth Rate" LabelFormat="{value}%">
        </ChartPrimaryYAxis>
        <ChartCrosshairSettings Enable="true" LineType="LineType.Vertical">
            <ChartCrosshairLine Width="@CrossWidth"></ChartCrosshairLine>
        </ChartCrosshairSettings>
        <ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@GDP_2015" Name="2015" XName="Country" Width="2" Opacity="1" YName="GDPGrowthRate" Type="@Series1">
                <ChartMarker Visible="@Marker1" Height="10" Width="10">
                </ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@GDP_2016" Name="2016" XName="Country" Width="2" Opacity="1" YName="GDPGrowthRate" Type="@Series2">
                <ChartMarker Visible="@Marker2" Height="10" Width="10">
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartLegendSettings Visible="true"></ChartLegendSettings>
    </SfChart>
</div>

<div class="col-lg-4 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table title="Properties" style="width: 100%">
                <tr style="height: 50px">
                    <td style="width: 50%">
                        <div>Indexed: </div>
                    </td>
                    <td style="width: 50%;">
                        <div>
                            <SfCheckBox Checked="@Indexed" ValueChange="@CheckValue" TChecked="bool"></SfCheckBox>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

@code{

    private Theme Theme { get; set; }
    public List<CategoryData> GDP_2015 { get; set; } = new List<CategoryData>
    {
        new CategoryData { Country = "Myanmar", GDPGrowthRate = 7.3 },
        new CategoryData { Country = "India", GDPGrowthRate = 7.9 },
        new CategoryData { Country = "Bangladesh", GDPGrowthRate = 6.0 },
        new CategoryData { Country = "Cambodia", GDPGrowthRate = 7.0 },
        new CategoryData { Country = "China", GDPGrowthRate = 6.9 },
    };
    public List<CategoryData> GDP_2016 { get; set; } = new List<CategoryData>
    {
        new CategoryData { Country = "Poland", GDPGrowthRate = 2.7 },
        new CategoryData { Country = "Australia", GDPGrowthRate = 2.5 },
        new CategoryData { Country = "Singapore", GDPGrowthRate = 2.0 },
        new CategoryData { Country = "Canada", GDPGrowthRate = 1.4 },
        new CategoryData { Country = "Germany", GDPGrowthRate = 1.8 },
    };
    private bool Indexed = true, Marker1 = false, Marker2 = false;
    private double LabelRotate, CrossWidth = 1;
    private ChartSeriesType Series1 = ChartSeriesType.Column, Series2 = ChartSeriesType.Column;

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    private void CheckValue(ChangeEventArgs<bool> args)
    {
        Indexed = args.Checked;
        if (Indexed)
        {
            Series1 = Series2 = ChartSeriesType.Column;
            Marker1 = Marker2 = false;
            LabelRotate = 0;
            CrossWidth = 1;
        }
        else
        {
            Series1 = Series2 = ChartSeriesType.Line;
            Marker1 = Marker2 = true;
            LabelRotate = 90;
            CrossWidth = 0;
        }
    }

    public class CategoryData
    {
        public string Country { get; set; }
        public double GDPGrowthRate { get; set; }
    }
}
